<template>
	<view class="container">
		<!-- 顶部操作栏 -->
		<view class="top-bar">
			<view  v-if="!isStaff" class="btn-outline" @tap="addSelectedToCart">
				批量加入
			</view>
			<view class="btn-outline" v-if="isStaff" @tap="createProduct">
				新建商品
			</view>
			<view class="btn-outline" @tap="refreshList">
				刷新
			</view>
			<view class="btn-outline" @tap="toggleFilter">
				{{showFilter ? '收起筛选' : '展开筛选'}}
			</view>
		</view>
		
		<!-- 分隔线 -->
		<view class="divider-line"></view>
		
		<!-- 悬浮筛选区域 -->
		<view class="filter-overlay" v-if="showFilter" @tap="toggleFilter"></view>
		<view class="filter-section floating-filter" v-if="showFilter">
			<view class="filter-header">
				<text class="filter-title">筛选</text>
				<text class="filter-notice">注意： 单位均为毫米！</text>
			</view>
			
			<view class="filter-content">
				<!-- 第一行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">类别</text>
						<picker mode="selector" :range="categories" @change="handleCategoryChange" class="filter-picker">
							<view class="picker-value">{{selectedCategory || '请选择'}}</view>
						</picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">名称</text>
						<input type="text" v-model="searchName" placeholder="" class="filter-input" />
					</view>
				</view>
				
				<!-- 第二行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">编号</text>
						<input type="text" v-model="codeFilter" placeholder="" class="filter-input" />
					</view>
					<view class="filter-item">
						<text class="filter-label">时间</text>
						<view class="date-picker-wrapper">
							<picker mode="date" @change="handleDateChange" class="date-picker">
								<view class="picker-value date-value">{{selectedDate || '请选择日期'}}</view>
							</picker>
						</view>
					</view>
				</view>
				
				<!-- 第三行 -->
				<view class="filter-row">
					<view class="filter-item-full">
						<text class="filter-label">售价</text>
						<view class="range-inputs">
							<input type="number" v-model="priceRange.min" placeholder="" class="range-input" />
							<text class="range-separator">至</text>
							<input type="number" v-model="priceRange.max" placeholder="" class="range-input" />
						</view>
					</view>
				</view>
				
				<!-- 第四行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">整体长度</text>
						<view class="range-inputs">
							<input type="number" v-model="lengthRange.min" placeholder="" class="range-input-small" />
							<text class="range-separator">至</text>
							<input type="number" v-model="lengthRange.max" placeholder="" class="range-input-small" />
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">佩戴直径</text>
						<view class="range-inputs">
							<input type="number" v-model="diameterRange.min" placeholder="" class="range-input-small" />
							<text class="range-separator">至</text>
							<input type="number" v-model="diameterRange.max" placeholder="" class="range-input-small" />
						</view>
					</view>
				</view>
				
				<!-- 第五行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">珍珠尺寸</text>
						<view class="range-inputs">
							<input type="number" v-model="pearlSizeRange.min" placeholder="" class="range-input-small" />
							<text class="range-separator">至</text>
							<input type="number" v-model="pearlSizeRange.max" placeholder="" class="range-input-small" />
						</view>
					</view>
				</view>
				
				<!-- 第六行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">珍珠颜色</text>
						<picker mode="selector" :range="pearlColorOptions" @change="handlePearlColorChange" class="filter-picker">
							<view class="picker-value">{{selectedPearlColor || '请选择'}}</view>
						</picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">珍珠圆度</text>
						<picker mode="selector" :range="pearlRoundnessOptions" @change="handlePearlRoundnessChange" class="filter-picker">
							<view class="picker-value">{{selectedPearlRoundness || '请选择'}}</view>
						</picker>
					</view>
				</view>
				
				<!-- 第七行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">珍珠净度</text>
						<picker mode="selector" :range="pearlClarityOptions" @change="handlePearlClarityChange" class="filter-picker">
							<view class="picker-value">{{selectedPearlClarity || '请选择'}}</view>
						</picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">珍珠材质</text>
						<picker mode="selector" :range="pearlMaterialOptions" @change="handlePearlMaterialChange" class="filter-picker">
							<view class="picker-value">{{selectedPearlMaterial || '请选择'}}</view>
						</picker>
					</view>
				</view>
				
				<!-- 第八行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">金属材质</text>
						<picker mode="selector" :range="metalMaterialOptions" @change="handleMetalMaterialChange" class="filter-picker">
							<view class="picker-value">{{selectedMetalMaterial || '请选择'}}</view>
						</picker>
					</view>
					<view class="filter-item">
						<text class="filter-label">玉石材质</text>
						<input type="text" v-model="jadeMaterial" placeholder="" class="filter-input" />
					</view>
				</view>
				
				<!-- 第九行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">玉石尺寸</text>
						<view class="range-inputs">
							<input type="number" v-model="jadeSizeRange.min" placeholder="" class="range-input-small" />
							<text class="range-separator">至</text>
							<input type="number" v-model="jadeSizeRange.max" placeholder="" class="range-input-small" />
						</view>
					</view>
				</view>
				
				<!-- 第十行 -->
				<view class="filter-row">
					<view class="filter-item">
						<text class="filter-label">其他配件</text>
						<input type="text" v-model="otherAccessories" placeholder="" class="filter-input" />
					</view>
					<view class="filter-item">
						<text class="filter-label">备注</text>
						<input type="text" v-model="remarks" placeholder="" class="filter-input" />
					</view>
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="filter-footer">

				<view class="filter-buttons">
					<button class="btn-outline filter-btn" @tap="resetFilter">重 置</button>
					<button class="btn-outline filter-btn" @tap="cancelFilter">取 消</button>
					<button class="btn-outline filter-btn" style="background-color: #282828; color: #fff;" @tap="confirmFilter">确 定</button>
				</view>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<scroll-view scroll-y class="product-list" @scrolltolower="loadMore">
			<view class="product-item" v-for="(item, index) in filteredProducts" :key="index" @tap.self="viewDetail(item)">
				<!-- 自定义复选框替代原生checkbox -->
				<view class="custom-checkbox" :class="{'selected': item.selected}" @tap.stop="toggleSelect(index)"></view>
				
				<!-- 左侧预览图 -->
				<image :src="item.preview_image_url" mode="aspectFit" class="product-image" @tap.stop="previewImage(item.preview_image_url)"></image>
				
				<!-- 中间信息区域 -->
				<view class="product-detail" @tap.stop="viewDetail(item)">
					<text class="product-name">{{item.name}}</text>
					<view class="price-container">
						<text class="price-label">售价</text>
						<text class="separator">|</text>
						<text class="product-price">{{item.salePrice}} 元</text>
					</view>
					<view class="code-container">
						<text class="code-label">编号</text>
						<text class="separator">|</text>
						<text class="product-code">{{item.skuCode || '暂无'}}</text>
					</view>
				</view>
				
				<!-- 右侧操作区 -->
				<view class="action-column">
					<button class="action-btn add-btn" @tap.stop="addToCart(item)">加入</button>
					<button v-if="isStaff" class="action-btn edit-btn" @tap.stop="editProduct(item)">编辑</button>
					<button class="action-btn detail-btn" @tap.stop="viewDetail(item)">详情</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { productApi, cartApi } from '../../api/index.js';
	import { userApi, orderApi } from '../../api/index.js';
	import auth from '../../utils/auth.js';
	
	export default {
		data() {
			return {
				isStaff: false, // 默认设为false，后面根据角色判断
				userInfo: {}, // 存储用户信息
				showFilter: false,
			
			
				// 增加更多的筛选字段
				codeFilter: '',
				selectedDate: '',
				lengthRange: {
					min: '',
					max: ''
				},
				diameterRange: {
					min: '',
					max: ''
				},
				pearlSizeRange: {
					min: '',
					max: ''
				},
				jadeSizeRange: {
					min: '',
					max: ''
				},
				selectedPearlColor: '',
				selectedPearlRoundness: '',
				selectedPearlClarity: '',
				selectedPearlMaterial: '',
				selectedMetalMaterial: '',
				jadeMaterial: '',
				otherAccessories: '',
				remarks: '',
				// 选项数据
				pearlColorOptions: ['白色', '金色', '黑色', '灰色', '粉色', '其他'],
				pearlRoundnessOptions: ['正圆', '圆', '椭圆', '异形', '其他'],
				pearlClarityOptions: ['无暇', '微瑕', '螺纹', '其他'],
				pearlMaterialOptions: ['海水珍珠', '淡水珍珠', '人造/贝珠', '其他', '无珍珠'],
				metalMaterialOptions: ['铜镀金', '银镀金', '925银', 'K金', '足金', '其他'],
				warehouses: ['电商', '门店'],
				selectedWarehouse: '',
				priceRange: {
					min: '',
					max: ''
				},
				searchName: '',
				categories:  ['耳饰','项链','手链','戒指','胸针'],
				attributes: [
					{ label: '新品', value: 'new' },
					{ label: '热销', value: 'hot' },
					{ label: '特价', value: 'sale' }
				],
				products: [],
				flattenedSkus: [], // 存储拍平后的所有SKU列表
				pagination: {
					current: 1,
					size: 10,
					total: 0
				},
				isLoading: false,
				isLoadingMore: false,
				selectedCategory: '',
			}
		},
		computed: {
			filteredProducts() {
				console.log("计算商品数据：")
				console.log(this.flattenedSkus)

				return this.flattenedSkus.filter(sku => {
					
					// 类别筛选
					if (this.selectedCategory && sku.category !== this.selectedCategory) {
						return false
					}

					
					// 价格范围筛选 - 使用SKU价格
					if (this.priceRange.min && sku.salePrice < Number(this.priceRange.min)) {
						return false
					}
					if (this.priceRange.max && sku.salePrice > Number(this.priceRange.max)) {
						return false
					}
					
					// 编号筛选
					if (this.codeFilter && !(sku.skuCode && sku.skuCode.toLowerCase().includes(this.codeFilter.toLowerCase()))) {
						return false
					}
					
					// 长度范围筛选
					if (this.lengthRange.min && sku.length && Number(sku.length) < Number(this.lengthRange.min)) {
						return false
					}
					if (this.lengthRange.max && sku.length && Number(sku.length) > Number(this.lengthRange.max)) {
						return false
					}
					
					// 直径范围筛选
					if (this.diameterRange.min && sku.diameter && Number(sku.diameter) < Number(this.diameterRange.min)) {
						return false
					}
					if (this.diameterRange.max && sku.diameter && Number(sku.diameter) > Number(this.diameterRange.max)) {
						return false
					}
					
					// 珍珠尺寸范围筛选
					if (this.pearlSizeRange.min && sku.pearlSize && Number(sku.pearlSize) < Number(this.pearlSizeRange.min)) {
						return false
					}
					if (this.pearlSizeRange.max && sku.pearlSize && Number(sku.pearlSize) > Number(this.pearlSizeRange.max)) {
						return false
					}
					
					// 珍珠颜色筛选
					if (this.selectedPearlColor && sku.pearlColor !== this.selectedPearlColor) {
						return false
					}
					
					// 珍珠圆度筛选
					if (this.selectedPearlRoundness && sku.pearlRoundness !== this.selectedPearlRoundness) {
						return false
					}
					
					// 珍珠净度筛选
					if (this.selectedPearlClarity && sku.pearlClarity !== this.selectedPearlClarity) {
						return false
					}
					
					// 珍珠材质筛选
					if (this.selectedPearlMaterial && sku.pearlMaterial !== this.selectedPearlMaterial) {
						return false
					}
					
					// 金属材质筛选
					if (this.selectedMetalMaterial && sku.metalMaterial !== this.selectedMetalMaterial) {
						return false
					}
					
					// 玉石材质筛选
					if (this.jadeMaterial && sku.jadeMaterial && !sku.jadeMaterial.toLowerCase().includes(this.jadeMaterial.toLowerCase())) {
						return false
					}
					
					// 玉石尺寸范围筛选
					if (this.jadeSizeRange.min && sku.jadeSize && Number(sku.jadeSize) < Number(this.jadeSizeRange.min)) {
						return false
					}
					if (this.jadeSizeRange.max && sku.jadeSize && Number(sku.jadeSize) > Number(this.jadeSizeRange.max)) {
						return false
					}
					
					// 其他配件筛选
					if (this.otherAccessories && sku.accessories && !sku.accessories.toLowerCase().includes(this.otherAccessories.toLowerCase())) {
						return false
					}
					
					// 备注筛选
					if (this.remarks && sku.remarks && !sku.remarks.toLowerCase().includes(this.remarks.toLowerCase())) {
						return false
					}
					
					// 搜索文本筛选 - 包含SKU编号和名称的搜索
					if (this.searchName) {
						const searchLower = this.searchName.toLowerCase();
						return sku.name.toLowerCase().includes(searchLower);
					}
					
					return true
				})
			}
		},
		onLoad() {
			this.checkUserRole();
			this.getProductList();
		},
		onShow() {
			// 刷新用户角色和商品列表
			this.checkUserRole();
			//this.getProductList();
			auth.checkLogin();
		},
		methods: {
			// 检查用户角色并设置权限
			async checkUserRole() {
				try {
					const res = await userApi.getUserInfo();
					if (res && res.data) {
						this.isLogin = true;
						this.userInfo = res.data;
						// 更新本地存储
						uni.setStorageSync('userInfo', res.data);
					} else {
						this.isLogin = false;
						this.userInfo = {};
					}
					if(this.userInfo.role === 'none'){
						uni.navigateTo({
							url: '/pages/user/login'
						});
					}
					// 获取本地存储的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					this.userInfo = userInfo || {};
					
					// 判断用户是否为admin或employee
					if (userInfo && (userInfo.role === 'admin' || userInfo.role === 'employee')) {
						this.isStaff = true;
					} else {
						this.isStaff = false;
					}
					console.log('当前用户角色:', userInfo ? userInfo.role : '未登录', '是否有管理权限:', this.isStaff);
				} catch (error) {
					console.error('获取用户角色失败', error);
					this.isStaff = false;
				}
			},
			toggleFilter() {
				this.showFilter = !this.showFilter
			},
			// 取消筛选，关闭筛选框但不应用筛选条件
			cancelFilter() {
				this.showFilter = false;
			},
			// 重置筛选条件
			resetFilter() {
				// 重置所有筛选字段
				this.selectedCategory = '';
				this.searchName = '';
				this.codeFilter = '';
				this.selectedDate = '';
				this.priceRange.min = '';
				this.priceRange.max = '';
				this.lengthRange.min = '';
				this.lengthRange.max = '';
				this.diameterRange.min = '';
				this.diameterRange.max = '';
				this.pearlSizeRange.min = '';
				this.pearlSizeRange.max = '';
				this.selectedPearlColor = '';
				this.selectedPearlRoundness = '';
				this.selectedPearlClarity = '';
				this.selectedPearlMaterial = '';
				this.selectedMetalMaterial = '';
				this.jadeMaterial = '';
				this.jadeSizeRange.min = '';
				this.jadeSizeRange.max = '';
				this.otherAccessories = '';
				this.remarks = '';
				
				// 提示用户
				uni.showToast({
					title: '已清空筛选条件',
					icon: 'none',
					duration: 1500
				});
			},
			// 确认筛选，应用筛选条件并重新获取数据
			confirmFilter() {
				// 重置分页到第一页
				this.pagination.current = 1;
				// 清空当前数据
				this.products = [];
				this.flattenedSkus = [];
				// 关闭筛选框
				this.showFilter = false;
				// 重新获取数据，应用筛选条件
				this.getProductList();
			},
			handleCategoryChange(e) {
				const index = e.detail.value;
				this.selectedCategory = this.categories[index];
				console.log("选择分类：", this.selectedCategory)
			},
			handleDateChange(e) {
				this.selectedDate = e.detail.value;
			},
			handlePearlColorChange(e) {
				const index = e.detail.value;
				this.selectedPearlColor = this.pearlColorOptions[index];
			},
			handlePearlRoundnessChange(e) {
				const index = e.detail.value;
				this.selectedPearlRoundness = this.pearlRoundnessOptions[index];
			},
			handlePearlClarityChange(e) {
				const index = e.detail.value;
				this.selectedPearlClarity = this.pearlClarityOptions[index];
			},
			handlePearlMaterialChange(e) {
				const index = e.detail.value;
				this.selectedPearlMaterial = this.pearlMaterialOptions[index];
			},
			handleMetalMaterialChange(e) {
				const index = e.detail.value;
				this.selectedMetalMaterial = this.metalMaterialOptions[index];
			},
			handleSearch() {
				this.getProductList();
			},
			toggleSelect(index) {
				this.flattenedSkus[index].selected = !this.flattenedSkus[index].selected;
			},
			viewDetail(sku) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${sku.id}&skucode=${sku.skuCode}&isStaff=${this.isStaff}`
				});
			},
			editProduct(sku) {
				if (!this.isStaff) return
				uni.navigateTo({
					url: `/pages/product/edit?id=${sku.id}`
				})
			},
			async addToCart(sku) {
				console.log(sku)
				try {
					await cartApi.addToCart({
						productId: sku.id,
						skuCode: sku.skuCode,
						quantity: 1
					});
					
					uni.showToast({
						title: '已加入货盘',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: error.message || '添加失败',
						icon: 'none'
					});
				}
			},
			async deleteProduct(sku) {
				if (!this.isStaff) return
				
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该商品吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await productApi.deleteProduct(sku.id);
								
								// 刷新列表
								this.getProductList();
								
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							} catch (error) {
								uni.showToast({
									title: error.message || '删除失败',
									icon: 'none'
								});
							}
						}
					}
				})
			},
			createProduct() {
				if (!this.isStaff) {
					uni.showToast({
						title: '您没有权限执行此操作',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: '/pages/product/edit'
				});
			},
			async addSelectedToCart() {
				const selectedSkus = this.flattenedSkus.filter(sku => sku.selected)
				if (selectedSkus.length === 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return
				}
				
				try {
					for (let sku of selectedSkus) {
						await cartApi.addToCart({
							productId: sku.id,
							skuCode: sku.skuCode,
							quantity: 1
						});
					}
					
					uni.showToast({
						title: '已加入货盘',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: error.message || '添加失败',
						icon: 'none'
					});
				}
			},
			// 扁平化处理SKU数据
			flattenSkus(products) {
				let result = [];
				
				products.forEach(product => {
					if (product.skus && product.skus.length > 0) {
						// 只希望显示每个产品的第一个sku
						product.skus.slice(0, 1).forEach(sku => {
							result.push({
								...sku,
								
									id: product.id,
									name: product.name,
									category: product.category,
									preview_image_url: product.preview_image_url,
									warehouse: product.warehouse,
									date: product.date,
									
									
									// 珍珠属性
									pearlMaterial: product.pearlMaterial,
									pearlRoundness: product.pearlRoundness,
									pearlClarity: product.pearlClarity,
									
									// 配件属性
									metalMaterial: product.metalMaterial,
									jadeSize: product.jadeSize,
									jadeMaterial: product.jadeMaterial,
									accessoryOthers: product.accessoryOthers,
									
									// 备注信息
									remark: product.remark,
									
									// 渠道信息
									channel: product.channel|| [],
								
								selected: false
							});
						});
					} else {
					console.log('产品没有SKU:', product);
						// 如果产品没有SKU，则将产品本身作为一个SKU添加
						result.push({
							id: product.id,
							skuCode: product.code || '',  // 确保code为空时也能正确显示
							listPrice: product.price,
							salePrice: product.price,
							
									id: product.id,
									name: product.name,
									category: product.category,
									preview_image_url: product.preview_image_url,
									warehouse: product.warehouse,
									date: product.date,
									
									
									// 珍珠属性
									pearlMaterial: product.pearlMaterial,
									pearlRoundness: product.pearlRoundness,
									pearlClarity: product.pearlClarity,
									
									// 配件属性
									metalMaterial: product.metalMaterial,
									jadeSize: product.jadeSize,
									jadeMaterial: product.jadeMaterial,
									accessoryOthers: product.accessoryOthers,
									
									// 备注信息
									remark: product.remark,
									
									// 渠道信息
									channel: product.channel|| [],
							
							selected: false
						});
					}
				});
				
				return result;
			},
			async getProductList() {
				if (this.isLoading) return;
				
				this.isLoading = true;
				uni.showLoading({ title: '加载中...' });
				console.log("selectedCategory",this.selectedCategory)
				try {
					// 构建查询参数，包含所有筛选条件
					const params = {
						page: this.pagination.current,
						size: this.pagination.size,
						category: this.selectedCategory,
						minPrice: this.priceRange.min,
						maxPrice: this.priceRange.max,
						name: this.searchName,
						// 添加所有其他筛选条件
						skuCode: this.codeFilter,
						createdDate: this.selectedDate,
						minLength: this.lengthRange.min,
						maxLength: this.lengthRange.max,
						minDiameter: this.diameterRange.min,
						maxDiameter: this.diameterRange.max,
						minPearlSize: this.pearlSizeRange.min,
						maxPearlSize: this.pearlSizeRange.max,
						pearlColor: this.selectedPearlColor,
						pearlRoundness: this.selectedPearlRoundness,
						pearlClarity: this.selectedPearlClarity,
						pearlMaterial: this.selectedPearlMaterial,
						metalMaterial: this.selectedMetalMaterial,
						jadeMaterial: this.jadeMaterial,
						minJadeSize: this.jadeSizeRange.min,
						maxJadeSize: this.jadeSizeRange.max,
						accessories: this.otherAccessories,
						remarks: this.remarks
					};
					
					const result = await productApi.getProductList(params);
					console.log("获取到的商品数据：")
					console.log(result.data);
					
					// 存储原始商品数据
					this.products = result.data.items;
					
					// 扁平化处理SKU数据
					this.flattenedSkus = this.flattenSkus(this.products);
					
					this.pagination.total = result.data.total;
					
					uni.hideLoading();
					this.isLoading = false;
				} catch (error) {
					console.error('获取商品列表失败', error);
					uni.hideLoading();
					this.isLoading = false;
					
					uni.showToast({
						title: error.message || '获取列表失败',
						icon: 'none'
					});
				}
			},
			async loadMore() {
				if (this.isLoadingMore || this.isLoading) return;
				
				// 检查是否已经加载完所有数据
				if (this.products.length >= this.pagination.total) {
					return;
				}
				
				this.isLoadingMore = true;
				this.pagination.current += 1;
				
				try {
					// 构建查询参数，包含所有筛选条件
					const params = {
						page: this.pagination.current,
						size: this.pagination.size,
						category: this.selectedCategory,
						minPrice: this.priceRange.min,
						maxPrice: this.priceRange.max,
						name: this.searchName,
						// 添加所有其他筛选条件
						skuCode: this.codeFilter,
						createdDate: this.selectedDate,
						minLength: this.lengthRange.min,
						maxLength: this.lengthRange.max,
						minDiameter: this.diameterRange.min,
						maxDiameter: this.diameterRange.max,
						minPearlSize: this.pearlSizeRange.min,
						maxPearlSize: this.pearlSizeRange.max,
						pearlColor: this.selectedPearlColor,
						pearlRoundness: this.selectedPearlRoundness,
						pearlClarity: this.selectedPearlClarity,
						pearlMaterial: this.selectedPearlMaterial,
						metalMaterial: this.selectedMetalMaterial,
						jadeMaterial: this.jadeMaterial,
						minJadeSize: this.jadeSizeRange.min,
						maxJadeSize: this.jadeSizeRange.max,
						accessories: this.otherAccessories,
						remarks: this.remarks
					};
					
					const result = await productApi.getProductList(params);
					
					// 将新获取的商品添加到列表
					const newProducts = result.data.records || [];
					this.products = [...this.products, ...newProducts];
					
					// 扁平化处理新获取的SKU数据
					const newSkus = this.flattenSkus(newProducts);
					this.flattenedSkus = [...this.flattenedSkus, ...newSkus];
					
					this.isLoadingMore = false;
				} catch (error) {
					console.error('加载更多失败', error);
					this.isLoadingMore = false;
					
					uni.showToast({
						title: '加载更多失败',
						icon: 'none'
					});
				}
			},
			// 增加预览图片方法
			previewImage(url) {
				if (!url) return;
				
				uni.previewImage({
					urls: [url],
					current: url,
					indicator: 'number',
					loop: false,
					longPressActions: {
						itemList: ['保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮');
						},
						fail: function(err) {
							console.log(err);
						}
					}
				});
			},
			// 增加刷新列表方法
			refreshList() {
				// 重置分页到第一页
				this.pagination.current = 1;
				// 清空当前数据
				this.products = [];
				this.flattenedSkus = [];
				// 显示加载提示
				uni.showToast({
					title: '正在刷新...',
					icon: 'loading',
					duration: 1000
				});
				// 重新获取数据
				this.getProductList();
			},
		}
	}
</script>

<style>
	/* 添加全局字体设置 */
	.container {
		min-height: 100vh;
		background-color: #ffffff;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		font-weight: normal;
	}
	
	.top-bar {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		background-color: #ffffff;
		z-index: 10;
		position: relative;
		margin-bottom: 0; /* 修改为0，因为我们添加了分隔线 */
		border-bottom: none; /* 移除原有的底部边框 */
	}
	
	/* 按钮样式 */
	.btn-outline {
		height: 60rpx;
		line-height: 60rpx;
		border: 1.5px solid #dcc8a5;
		border-radius: 0;
		color: #282828;
		font-size: 28rpx;
		text-align: center;
		background-color: #ffffff;
		flex: 1;
		margin: 0 10rpx;
		font-weight: inherit;
		font-family: inherit;
	}
	
	.btn-outline:first-child {
		margin-left: 0;
	}
	
	.btn-outline:last-child {
		margin-right: 0;
	}
	
	.product-list {
		height: calc(100vh - 116rpx);
		background-color: #ffffff;
	}
	
	.product-item {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		position: relative;
		border-bottom: 1rpx solid rgba(220, 200, 165, 0.3);
	}
	
	.product-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.product-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;
		padding-right: 10rpx;
	}
	
	.product-name {
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 10rpx;
		font-weight: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.price-container, .code-container {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}
	
	.price-label, .code-label {
		font-size: 24rpx;
		color: #282828;
		font-weight: inherit;
	}
	
	.separator {
		font-size: 24rpx;
		color: #dcc8a5;
		margin: 0 4rpx;
		font-weight: inherit;
	}
	
	.product-price {
		font-size: 24rpx;
		color: #282828;
		margin-left: 4rpx;
		font-weight: inherit;
	}
	
	.product-code {
		font-size: 24rpx;
		color: #282828;
		margin-left: 4rpx;
		font-weight: inherit;
	}
	
	.action-column {
		display: flex;
		flex-direction: column;
		gap: 2rpx;
		margin-left: 10rpx;
	}
	
	.action-btn {
		font-size: 22rpx;
		padding: 0;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin: 0;
		background-color: #ffffff;
		color: #282828;
		border-radius: 0;
		border: none;
		font-weight: inherit;
		font-family: inherit;
	}
	
	.action-btn::after {
		border: none;
	}
	
	.filter-section {
		background-color: #ffffff;
	}
	
	/* 筛选悬浮层样式 */
	.filter-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(40, 40, 40, 0.5);
		z-index: 100;
	}
	
	.floating-filter {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 92%;
		max-height: 85vh;
		background-color: #ffffff;
		z-index: 101;
		border-radius: 0;
		box-shadow: 0 8rpx 24rpx rgba(40, 40, 40, 0.15);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid #282828;
	}
	
	.filter-header {
		padding: 26rpx;
		border-bottom: 1rpx solid #282828;
		background-color: #282828;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.filter-title {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: inherit;
		text-align: left;
	}
	
	.filter-notice {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: inherit;
		text-align: right;
	}
	
	.filter-content {
		padding: 30rpx;
		max-height: 65vh;
		overflow-y: auto;
	}
	
	.filter-row {
		display: flex;
		margin-bottom: 26rpx;
	}
	
	.filter-item {
		flex: 1;
		margin-right: 24rpx;
	}
	
	.filter-item:last-child {
		margin-right: 0;
	}
	
	.filter-item-full {
		flex: 1;
		width: 100%;
	}
	
	.filter-label {
		font-size: 28rpx;
		color: #282828;
		font-weight: inherit;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.filter-input {
		width: 100%;
		height: 70rpx;
		border: 1rpx solid #dcc8a5;
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		font-weight: inherit;
		font-family: inherit;
		font-size: 26rpx;
	}
	
	.filter-picker {
		width: 100%;
		height: 70rpx;
		border: 1rpx solid #dcc8a5;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		background-color: #ffffff;
	}
	
	.filter-picker::after {
		content: '';
		width: 0;
		height: 0;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-top: 12rpx solid #282828;
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
	}
	
	.picker-value {
		flex: 1;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #282828;
		font-weight: inherit;
	}
	
	.range-inputs {
		display: flex;
		align-items: center;
	}
	
	.range-input {
		flex: 1;
		height: 70rpx;
		border: 1rpx solid #dcc8a5;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-weight: inherit;
		font-family: inherit;
		font-size: 26rpx;
	}
	
	.range-input-small {
		flex: 1;
		height: 70rpx;
		border: 1rpx solid #dcc8a5;
		padding: 0 20rpx;
		box-sizing: border-box;
		min-width: 0;
		font-weight: inherit;
		font-family: inherit;
		font-size: 26rpx;
	}
	
	.range-separator {
		margin: 0 10rpx;
		color: #282828;
		font-weight: inherit;
	}
	
	.date-picker-wrapper {
		position: relative;
		width: 100%;
	}
	
	.date-picker {
		width: 100%;
	}
	
	.date-value {
		width: 100%;
		height: 70rpx;
		border: 1rpx solid #dcc8a5;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		font-weight: inherit;
	}
	
	.filter-footer {
		padding: 26rpx;
		border-top: 1rpx solid #dcc8a5;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}
	
	.filter-note {
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	
	.note-text {
		font-size: 28rpx;
		color: #ff0000;
		font-weight: inherit;
		line-height: 1.5;
	}
	
	.filter-buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		width: 100%;
	}
	
	.filter-btn {
		height: 60rpx;
		line-height: 60rpx;
		border: 1.5px solid #dcc8a5;
		border-radius: 0;
		color: #282828;
		font-size: 28rpx;
		text-align: center;
		background-color: #ffffff;
		padding: 0;
		flex: 1;
		margin: 0 10rpx;
		font-weight: inherit;
		font-family: inherit;
	}
	
	/* 自定义复选框样式 */
	.custom-checkbox {
		width: 25rpx;
		height: 25rpx;
		border: 1px solid #282828;
		margin-right: 20rpx;
		background-color: #ffffff;
		flex-shrink: 0;
		position: relative;
	}
	
	/* 选中状态样式 */
	.custom-checkbox.selected {
		background-color: #dcc8a5;
		border-color: #282828;
	}
	
	@media screen and (max-width: 375px) {
		.btn-outline {
			padding: 0 12rpx;
			font-size: 24rpx;
		}
	}
	
	/* 添加分隔线样式 */
	.divider-line {
		height: 1px;
		background-color: #dcc8a5;
		opacity: 0.5;
		margin: 0 30rpx 2rpx 30rpx;
	}
	
	.filter-input, .filter-picker, .range-input, .range-input-small, .date-value {
		background-color: #ffffff;
		border: 1px solid #dcc8a5;
	}
</style> 